<template>
  <div id="">
    <van-nav-bar
        title="我的拼团"
        left-arrow
        @click-left="onClickLeft"
    />
    <div class="tab-bar">
      <div class="tab-item" :class="{active: selectedTab === 'all'}" @click="selectTab('all')">全部</div>
      <div class="tab-item" :class="{active: selectedTab === 'ongoing'}" @click="selectTab('ongoing')">进行中</div>
      <div class="tab-item" :class="{active: selectedTab ==='success'}" @click="selectTab('success')">成功</div>
      <div class="tab-item" :class="{active: selectedTab === 'failed'}" @click="selectTab('failed')">失败</div>
    </div>
    <div class="order-list">
      <div class="order-item" v-if="selectedTab === 'all' || selectedTab === 'failed'">
        <div class="order-header">
          <span>订单编号: 202205075324999516043290</span>
          <span>已取消</span>
        </div>
        <div class="product-info">
          <img src="https://hh666.oss-cn-beijing.aliyuncs.com/fb68d17b42a5b1e897d19f1f9d354656.jpeg" alt="Product1">
          <div class="product-details">
            <span>极简全棉纯棉床上用品四件套现代简约北欧男床单3三件套床笠被套</span>
            <span>数量: 1; L穆尼, 1.8M床</span>
            <span>¥99.00</span>
          </div>
        </div>
        <div class="order-summary">
          <span>优惠: ¥0.00, 运费: ¥10.00, 需付款: ¥109.00</span>
          <button class="delete-button">删除</button>
        </div>
      </div>
      <div class="order-item" v-if="selectedTab === 'all' || selectedTab === 'ongoing'">
        <div class="order-header">
          <span>订单编号: 202204530252287460432900</span>
          <span>交易关闭</span>
        </div>
        <div class="product-info">
          <img src="https://hh666.oss-cn-beijing.aliyuncs.com/user/2024/11/13/0c9ad1debd33497faf77200e4136cd5e.jpg" alt="Product2">
          <div class="product-details">
            <span>Dyson/戴森AM09无叶电风扇冷暖两用暖风取暖器冬季家居小型取暖机</span>
            <span>数量: 1;</span>
            <span>¥12.00</span>
          </div>
        </div>
        <div class="order-summary">
          <span>优惠: ¥0.00, 运费: ¥300.00, 需付款: ¥312.00</span>
          <button class="delete-button">删除</button>
        </div>
      </div>
      <div class="no-more" v-if="orderList.length === 0">没有更多了</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      selectedTab: 'all',
      orderList: []
    };
  },
  methods: {
    selectTab(tab) {
      this.selectedTab = tab;
    },
    onClickLeft(){
      this.$router.push('/wode')
    }
  }
};
</script>

<style scoped>
#app {
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}
.time {
  font-size: 12px;
}
.title {
  font-size: 16px;
  font-weight: bold;
}
.camera {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: lightgray;
}
.tab-bar {
         display: flex;
         width: 100%;
         border-bottom: 1px solid #ccc;
       }
.tab-item {
         flex: 1;
         text-align: center;
         padding: 10px;
         cursor: pointer;
       }
.active {
  border-bottom: 2px solid #000;
}
.order-list {
           width: 100%;
           padding: 20px;
         }
.order-item {
           border-bottom: 1px solid #ccc;
           padding: 10px;
         }
.order-header {
           display: flex;
           justify-content: space-between;
           margin-bottom: 10px;
         }
.product-info {
             display: flex;
             align-items: center;
             margin-bottom: 10px;
           }
.product-info img {
             width: 100px;
             height: 100px;
             margin-right: 10px;
           }
.product-details {
             display: flex;
             flex-direction: column;
           }
.product-details span {
             margin-bottom: 5px;
           }
.order-summary {
           display: flex;
           justify-content: space-between;
           align-items: center;
         }
.delete-button {
            background-color: pink;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
          }
.no-more {
        text-align: center;
        color: gray;
        margin-top: 20px;
      }
</style>